<template>
  <div class="control-panel">
    <div class="panel-grid">
      <panel-button
        v-for="(btn, index) in buttons"
        :key="index"
        :label="btn.label"
        :color="btn.color"
        :wrap="false"
        :button-data="btn"
        :disabled="btn.disabled"
        @click="$emit('click', $event)"
      />
    </div>
  </div>
</template>

<script>
import PanelButton from "../FunctionButton.vue";

export default {
  components: { PanelButton },
  props: {
    buttons: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClick(btn) {
      this.$emit("click", btn);
    },
  },
};
</script>

<style lang="less" scoped>
.control-panel {
  width: 100%;
  height: 100%;
  //   background-color: #2a2a2a;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10% 8%;
  box-sizing: border-box;
}

.panel-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  grid-template-rows: repeat(4, 1fr); /* 4行 */
  column-gap: 8%;
  row-gap: 15%;
}
</style>